<template>
    <div class="order-write">
        <div class="head-box">
            <div class="head-title">核销管理 / 订单核销记录</div>
        </div>
        <div class="order-table">
            <div class="comtent-box">
                <div class="head-operation">
                    <div class="search-box">
                        <el-select
                            v-model="searchFrom.hdongid"
                            class="select-w"
                            size="small"
                            @change="searchFun"
                        >
                            <el-option
                                v-for="item in optionhd"
                                :key="item.id"
                                :label="item.title"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                        <el-select
                            v-model="searchFrom.uid_ck"
                            class="select-w"
                            size="small"
                            @change="searchFun"
                        >
                            <el-option
                                v-for="item in optionscp"
                                :key="item.uid"
                                :label="item.name"
                                :value="item.uid"
                            >
                            </el-option>
                        </el-select>
                        <el-select
                            v-model="timeval"
                            size="small"
                            class="select-ml"
                            @change="searchFun"
                        >
                            <el-option
                                v-for="item in options"
                                :key="item.id"
                                :label="item.title"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                        <el-input
                            v-model="searchFrom.chno"
                            class="input-w"
                            size="small"
                            placeholder="搜索券码"
                        >
                            <i
                                slot="suffix"
                                class="el-input__icon el-icon-search"
                                @click="searchFun"
                            ></i
                        ></el-input>
                    </div>
                    <div class="but-operation">
                        <el-button
                            type="primary"
                            size="small"
                            @click="handleWrite"
                            >前往核销</el-button
                        >
                    </div>
                </div>
            </div>
            <div class="table-box">
                <el-table
                    :data="tableData"
                    border
                    style="width: 100%"
                    v-infinite-scroll="loadFun"
                >
                    <el-table-column
                        prop="time_ck_txt"
                        label="核销时间"
                        width="200"
                        align="center"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="uname"
                        label="核销员"
                        width="150"
                        align="center"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="chno"
                        label="券码"
                        width="200"
                        align="center"
                    >
                    </el-table-column>
                    <el-table-column
                        prop=" hdno"
                        label="活动编号"
                        width="100"
                        align="center"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="title_hd"
                        label="活动名称"
                        width="150"
                        align="center"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="gdname"
                        label="产品名称"
                        width="200"
                        align="center"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="uname_ck"
                        label="购买者"
                        width="200"
                        align="center"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="status_ck_txt"
                        label="核销状态"
                        width="200"
                        align="center"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="status_ck_txt"
                        label="核销认证"
                        width="200"
                        align="center"
                    >
                    <template slot-scope="scope">
                            <div class="content-box">
                                <el-image 
                                    class="content-img"
                                    v-if="scope.row.sign_ck"
                                    style="width: 50px; height: 50px"
                                    :src="scope.row.sign_ck" 
                                    :preview-src-list="[scope.row.sign_ck]">
                                </el-image>
                                <el-image 
                                    class="content-img"
                                    v-if="scope.row.img_ck"
                                    style="width: 50px; height: 50px"
                                    :src="scope.row.img_ck" 
                                    :preview-src-list="[scope.row.img_ck]">
                                </el-image>
                            </div>
                    </template>
                    </el-table-column>
                    <el-table-column
                        prop="txt_ck"
                        label="备注"
                        width="200"
                        align="center"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="address"
                        label="操作"
                        :fixed="tableData.length > 0 ? 'right' : false"
                        width="150"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <el-popover
                                placement="bottom"
                                width="200"
                                trigger="click"
                            >
                                <div class="content-box">
                                    <div
                                        class="content-row"
                                        v-for="item in status_ck_ls"
                                        :key="item.v"
                                    >
                                        <el-radio
                                            v-model="scope.row.status_ck"
                                            :label="`${item.v}`"
                                            >{{ item.title }}</el-radio
                                        >
                                    </div>
                                </div>
                                <div style="text-align: right; margin: 0">
                                    <el-button
                                        type="primary"
                                        size="mini"
                                        @click="setstatusFun(scope.row)"
                                        >确定</el-button
                                    >
                                </div>
                                <el-button
                                    size="mini"
                                    type="primary"
                                    slot="reference"
                                    >修改卡券状态</el-button
                                >
                            </el-popover>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 核销弹框 -->
        <writeoffDialog
            ref="writeoffDialog"
            @immediatelyFun="immediatelyFun"
        ></writeoffDialog>
        <dateWin
            ref="dateWin"
            @selectDate="selectDate"
            @closeDate="closeDate"
        ></dateWin>
    </div>
</template>

<script>
import writeoffDialog from "@/components/interactive/writeoffDialog.vue";
import config from "@/js/conf/Config.js";
import dateWin from "@/components/comm/DateWin.vue";


export default {
    props: [],
    components: { writeoffDialog, dateWin },
    computed: {},
    data() {
        return {
            is_soll: false,
            tableData: [],
            status_ck_ls: [],
            status_ck: 1,
            searchFrom: {
                ch: "hexiao",
                hdongid: "",
                kw_ch: "",
                kw: "",
                chno: "",
                uid_ck: "",
                time: "",
                stime: "",
                dtime: "",
                pfrom: 0,
                pnum: 20,
            },
            imgCkObj: {},
            timeval: "",
            options: [
                {
                    id: "",
                    title: "全部日期",
                },
                {
                    id: 1,
                    title: "今日",
                },
                {
                    id: 2,
                    title: "本月",
                },
                {
                    id: 3,
                    title: "本季",
                },
                {
                    id: 4,
                    title: "本年",
                },
                {
                    id: 5,
                    title: "自定义",
                },
            ],
            optionhd: [
                {
                    id: "",
                    title: "全部活动",
                },
            ],
            optionscp: [
                {
                    uid: "",
                    name: "全部核销员",
                },
            ],
        };
    },
    created() {
        this.initData();
    },
    mounted() {
        
    },
    methods: {
        base64UrlEmitFun () {  // 接收电子签名 获取的图片路径
            uni.$on('base64UrlEmit',(dataUrl)=>{ 
                if (!dataUrl) return false;
                this.imgCkObj.sign_ck = dataUrl;
            });
        },
        initData() {
            this.getListFun();
            this.gethdListFun();
            this.getcpListFun();
            this.base64UrlEmitFun();
        },
        selectDate(st, et) {
            this.searchFrom.stime = st;
            this.searchFrom.dtime = et;
            this.options.push({
                id: 6,
                title: `${st} 至 ${et}`,
            });
            this.timeval = 6;
            this.searchFrom.pfrom = 0;
            this.tableData = [];
            this.getListFun();
        },
        closeDate() {},
        loadFun() {
            if (this.is_soll) return;
            this.searchFrom.pfrom += 20;
            this.getListFun();
        },
        searchFun() {
            if (this.timeval == 5) {
                this.$refs.dateWin.show("show");
            } else {
                this.options.map((v, i) => {
                    if (v.id == 6) {
                        this.options.splice(i, 1);
                    }
                });
                this.searchFrom.pfrom = 0;
                this.tableData = [];
                this.getListFun();
            }
        },
        setstatusFun(item) {
            const data = {
                act: "ck_edt",
                odid: item.id,
                status_ck: item.status_ck,
            };
            this.setactFun(data);
        },
        immediatelyFun(data) {
            this.setactFun(data);
        },
        // 单据操作
        async setactFun(data = {}) {
            let url = config.HD_ORDER_ORDER_ACT;
            let param = {
                odid: data.odid || "",
                odid_ls: data.odid_ls || [],
                act: data.act,
                status_send: "",
                status_ck: data.status_ck || "",
                txt_ck: data.txt_ck || "",
                img_ck: this.$refs.writeoffDialog.img_ck || "",
                sign_ck: this.imgCkObj.sign_ck || "",
                shipp_info: data.shipp_info || "",
            };
            let res = await this.$api({ url: url, data: param });
            if (!res) return;
            if (res.status == 1) {
                this.$msg({ title: res.msg });
                this.dialogContact = false;
                setTimeout(() => {
                    this.resetFun();
                    this.getListFun();
                }, 2000);
            }
        },
        // 打开核销弹框
        handleWrite() {
            const data = {
                type: "3",
            };
            this.$refs.writeoffDialog.initData(data);
        },
        async getcpListFun() {
            let url = config.UCP_LS;
            let param = {
                md: "xs",
            };
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1 && res.data) {
                this.optionscp = this.optionscp.concat(res.data);
            }
        },
        async gethdListFun() {
            let url = config.HD_COMMON_HD_LS;
            let param = {
                is_all: "1",
            };
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1 && res.data.ls) {
                this.optionhd = this.optionhd.concat(res.data.ls);
            }
        },
        async getListFun() {
            this.is_soll = true;
            let url = config.HD_ORDER_ORDER_LS;
            let param = this.searchFrom;
            param.time = this.timeval == 6 ? 5 : param.time;
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1 && res.data.ls) {
                this.tableData = res.data.ls;
                this.setTablehetFun();
                setTimeout(() => {
                    this.is_soll = false;
                }, 200);
            } else {
                this.is_soll = true;
            }
            if (
                res.status == 1 &&
                res.data.status_ck_ls &&
                this.status_ck_ls.length == 0
            ) {
                this.status_ck_ls = res.data.status_ck_ls;
                this.status_ck = res.data.status_ck_ls[0].v;
            }
        },
        //计算表格操作栏的高度
        setTablehetFun() {
            const val = this.activeName;
            let height = 0;
            this.$nextTick(() => {
                const query = uni
                    .createSelectorQuery()
                    .selectAll(".el-table__body");
                query
                    .fields(
                        {
                            rect: false,
                            size: true,
                            scrollOffset: false,
                        },
                        function (res) {
                            res.map((v) => {
                                if (v.height) {
                                    height = v.height + 50;
                                }
                            });
                        }
                    )
                    .exec(function () {});
            });
            setTimeout(() => {
                for (let i = 0; i < 3; i++) {
                    console.log(i);
                    let dom = document.querySelectorAll(
                        ".el-table__fixed-right"
                    )[Number(i)];
                    if (dom) {
                        dom.setAttribute(
                            "style",
                            `width:150px;height: ${height}px `
                        );
                    }
                }
            }, 200);
        },
        resetFun() {
            this.searchFrom = {
                ch: "hexiao",
                hdongid: "",
                kw_ch: "",
                kw: "",
                chno: "",
                uid_ck: "",
                time: "",
                stime: "",
                dtime: "",
                pfrom: 0,
                pnum: 20,
            };
        },
    },
};
</script>

<style lang="scss" scoped >
.content-box {
    .content-img {
        margin-right: 5px;
        cursor: pointer;
    }
    &:last-child {
        margin: 0;
    }
}
.order-write {
    background: #f2f2f2;
    height: 100%;

    .head-box {
        background: #fff;
        padding: 10px;
        .head-title {
            font-size: 18px;
        }
    }
    .order-table {
        margin-top: 10px;
        .comtent-box {
            padding: 0 10px;
            .head-operation {
                height: 50px;
                background: #fff;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 10px;
                ::v-deep.search-box {
                    display: flex;
                    .select-ml {
                        margin-right: 10px;
                    }
                    .select-w {
                        width: 120px;
                        margin-right: 10px;
                        &.date-l {
                            width: 182px;
                            margin-right: 0;
                            ::v-deep.el-input__inner {
                                border-right: none;
                                border-radius: 4px 0 0 4px;
                                &:focus {
                                    border-color: #dcdfe6;
                                }
                            }
                        }
                        &.date-r {
                            width: 182px;
                            ::v-deep.el-input__inner {
                                border-radius: 0 4px 4px 0;
                                &:focus {
                                    border-color: #dcdfe6;
                                }
                            }
                        }
                    }
                    .input-w {
                        width: 200px;

                        i {
                            font-size: 18px;
                            color: #7f7f7f;
                            cursor: pointer;
                            font-weight: bold;
                        }
                    }
                }
                .but-operation {
                    text-align: right;
                }
            }
        }
        ::v-deep.table-box {
            position: relative;
            width: 100%;
            height: calc(100vh - 110px);
            overflow: auto;
            .el-table {
                width: calc(100% - 18px) !important;
                height: 100%;
                padding-bottom: 20px;
                overflow-y: scroll;
                position: absolute;
                top: 0;
                left: 9px;
                &::before {
                    height: 0;
                }
            }
            .el-table-column--selection {
                .cell {
                    padding-right: 10px;
                }
            }
            .but {
                margin-bottom: 10px;
                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }
}
</style>
